*{
     margin: 0;
     padding: 0;
     list-style: none;
     text-decoration: none;
     box-sizing: border-box;
}

body{
     background-color: #f3f3f3;;
    
}

.wrapper{
     .side-bar{
          width: 200px;
          background-color: #2A3F54;
          position: fixed;
          height: 100%;
          padding: 30px 0;

          .nav-title{
               font-size: 18px;     
               color: white;
               text-transform: uppercase;
               text-align: center;
               margin: 10px 0;
          }
          .nav-list {
               li{
                    padding: 15px;
                    a{
                         display: block;
                         color: #f3f3f3;
                         .fa{
                              margin-right: 5px;
                         }
                    }
                    &:hover,.active{
                         background-color:#35495D;
                    }
               }
          }
          .social-medias{
               position: absolute;
               bottom: 0;
               display: flex;
               width: 100%;
               justify-content: center;
               a{
                    display: block;
                    color: white;
                    width: 40px;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    margin: 0 5px;
                    background-color: #a38484;
                    border-top-left-radius: 5px;
                    border-top-right-radius: 5px;
               }
          }
     }

     .main-content{
          position: fixed;
          left: 200px;
          right: 0;

          .title{
               padding: 20px 20px;
               border-bottom: 1px solid #ddd;
               font-size: 20px;
               font-weight: bold;
          }
          .info{
               padding: 15px;
          }
     }

}